<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="/js/vue.js"></script>
</head>
<body>
    <div id="app">
        <div>{{msg}}</div>
        <div>
            <input type="text" v-model="msg">
        </div>
    </div>
    <script>
        /*
            数据双向绑定 v-model="uname"  页面可以改变数据  数据也可以改变页面
        */
       /*
            MVVM设计思想： 分而治之、把不同的业务代码放到不同模块中，通过特定 的逻辑把他们组织到一块
            核心：从view到model 用的是事件监听  从model到view用的事件绑定
                1.M ：model （data中的数据）
                2.V ：view  （DOM元素）
                3.VM ：view-Model 
       */
        var vm = new Vue({
           //el 元素的挂载位置（值可以是css选择器或者DOM元素）
           el:'#app',
           //data：模型数据（值是一个对象）
           data:{
                msg:'hello Vue',
                msg1:'v-once只编译一次'
           }
       })
    </script>
</body>
</html>